Steaming SSR

❓질문

Steaming SSR에 관하여 설명해주세요.

Steaming SSR은 서버에서 만들어진 HTML파일을 한번에 보내는것이 아니라 작은 조각 단위로 나누어 전송을 합니다 그럼 받은 브라우저에서는 중요한 부분을 먼저 렌더링하여 보여줄수있습니다.

동영상이나 무거운 UI파트를 보유하고있는 웹 페이지의 경우 한번에 보내게되면 병목 현상이 생깁니다. 이를 방지할려고 만들어진 기술이고 이를 통해서 해당부분을 제외하고 다른 부분을 보여줌으로써 사용자 경험을 끌어올릴 수 있습니다.

Streaming SSR은 서버에서 렌더링된 HTML을 한 번에 완성해서 보내는 방식이 아니라, 준비된 부분부터 점진적으로 스트리밍해서 클라이언트에 전달하는 기술입니다.

기존 SSR은 서버에서 모든 데이터를 처리한 뒤 완전한 HTML을 전송하는 반면, Streaming SRR은 서버가 데이터를 준비하는 즉시 HTML 조각을 스트림 형태로 보내고 클라이언트는 이를 실시간으로 렌더링합니다.

React 18에서는 renderToPipeableStream API를 통해 구현할 수 있으며 이 API는 서버에서 HTMl을 조각 단위로 스트리밍할 수 있도록 지원합니다.

스트리밍된 데이터와 리액트의 hydration과정에서 발생할 수 있는 문제도 있습니다.
렌더링 되는 HTML과 리액트 상태 불일치로 에러가 발생할 수 도있습니다. 이때문에 텐스택 쿼리 같은 라이브러리를 활용하여 데이터를 신뢰성있게 동기화 시키는게 좋습니다.